<template>
  <div class="container">
    <infoBill :serve-company-id="serveCompanyId" :start-time="startTime" :end-time="endTime"/>
    <el-card class="mg-t-20" shadow="never">
      <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
        <el-tab-pane label="对账详单" name="detail">
          <billDetail :serve-company-id="serveCompanyId" :start-time="startTime" :end-time="endTime"/>
        </el-tab-pane>
        <el-tab-pane label="对账总和" name="sum">
          <billSum :serve-company-id="serveCompanyId" :start-time="startTime" :end-time="endTime"/>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import infoBill from './components/info-bill.vue'
import billDetail from './components/bill-detail.vue'
import billSum from './components/bill-sum.vue'
export default defineComponent({
  components: {
    infoBill,
    billDetail,
    billSum
  },
  data() {
    return {
      activeName: 'detail',
      serveCompanyId: '',
      startTime: '',
      endTime: ''
    }
  },
  mounted() {
    if (this.$route.query?.serveCompanyId) {
      this.serveCompanyId = atob((this as any).$route.query.serveCompanyId)
    }
    if (this.$route.query?.startTime) {
      this.startTime = atob((this as any).$route.query.startTime)
    }
    if (this.$route.query?.endTime) {
      this.endTime = atob((this as any).$route.query.endTime)
    }
  },
  methods: {
    handleClick(ev: string) {
      console.log(1111, ev)
    }
  }
})
</script>

<style scoped lang="stylus">
.container
  padding-top 10px
</style>
